import { useTaskModal, useTasksSearchParams } from "./utils";
import { Card } from "antd";
import { useTaskTypes } from "../../hooks/useTasks";
import { ReactComponent as TaskIcon } from "../../assets/task.svg";
import { ReactComponent as BugIcon } from "../../assets/bug.svg";
import { Task } from "../../types/task";
import { TextHighlight } from "../../components/TextHightlight";

export const TaskCard = ({ task }: { task: Task }) => {
  const { name: keyword } = useTasksSearchParams();
  const { data: taskTypes } = useTaskTypes();
  const { openTaskModal } = useTaskModal();
  const TypeIcon = ({ typeId }: { typeId: number }) => {
    const name = taskTypes?.find((taskType) => taskType.id === typeId)?.name;
    if (!name) return null;
    return name === "task" ? <TaskIcon /> : <BugIcon />;
  };

  return (
    <Card
      style={{ marginBottom: "1.2rem", cursor: "pointer" }}
      onClick={() => openTaskModal(task.id)}
    >
      <TextHighlight text={task.name} keyword={keyword} />
      <TypeIcon typeId={task.typeId} />
    </Card>
  );
};
